<template>
    <div class="tags" v-if="showTags">
        <el-tag :key="tag" v-for="tag in tags" 
        closable :disable-transitions="false"
         @close="handleClose(tag)"
         type="warning"
         color="rgb(122, 172, 230)"
         hit="false">
         <router-link :to="tag.path" class="router-link">
              {{tag.title}}
         </router-link>
           
        </el-tag>
    </div>

</template>

<script>
    import bus from './bus'
    export default {
        name: 'Tags',
        data() {
            return {
                tags: []
            }
        },
        methods: {
            handleClose(tag) {
                this.tags.splice(this.tags.indexOf(tag), 1);
            },
            // handleClick(tag) {
            //     this.$route.push(this.tags.splice(this.tags.indexOf(tag), 1))
            // },
            setTags(route) {
                const isExist = this.tags.some(item => {
                    return item.path === route.fullPath
                });
                if (!isExist) {
                    this.tags.push({
                        title: route.meta.title,
                        path: route.fullPath,
                        name: route.matched[1].components.default.name
                    })
                }
                bus.$emit('tags', this.tags)
            }
        },
        computed: {
            showTags() {
                return this.tags.length > 0;
            }
        },
        watch: {
            $route(newValue, oldValue) {
                this.setTags(newValue);
            }
        },
        created() {
            this.setTags(this.$route);
        }

    }
</script>

<style>
    .tags {
        position: relative;
        height: 33px;
        width: 100%;
        margin-left: 8%;
        margin-top:-1%;
        overflow: hidden;
        background: rgb(239, 241, 243);
        padding-right: 120px;
        box-shadow: 0 5px 10px rgb(206, 206, 206);
    }
.el-tag {
    float: left;
}
/* 相邻元素选择器 这里是标签之间的间隔调整 */
    .el-tag+.el-tag {
        margin-left: 0px;
    }
    .router-link {
        text-decoration: none;
    }
</style>